<template>
  <div class="distribution-container">
    <div class="chart" id="chart_right2"></div>
    <div class="info-container">
      <div class="info-item">
        <div class="icon normal-icon"></div>
        <span>正常设备: {{ normalEquipment }}</span>
      </div>
      <div class="info-item">
        <div class="icon alarm-icon"></div>
        <span>报警设备: {{ alarmEquipment }}</span>
      </div>
      <div class="info-item">
        <div class="icon offline-icon"></div>
        <span>离线设备: {{ offlineEquipment }}</span>
      </div>
      <div class="info-item">
        <div class="icon fault-icon"></div>
        <span>故障设备: {{ faultEquipment }}</span>
      </div>
      <div class="info-item">
        <div class="icon unable-icon"></div>
        <span>未启用设备: {{ unableEquipment }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-gl';
import { getsystem } from '@/api/echarts';

export default {
  name: "distribution",
  data() {
    return {
      normalEquipment: 0,
      alarmEquipment: 0,
      offlineEquipment: 0,
      faultEquipment: 0,
      unableEquipment: 0
    };
  },
  created() {
    getsystem().then(res => {
      this.normalEquipment = res.msg.normalEquipment;
      this.alarmEquipment = res.msg.alarmEquipment;
      this.offlineEquipment = res.msg.offlineEquipment;
      this.faultEquipment = res.msg.faultEquipment;
      this.unableEquipment = res.msg.unableEquipment;
      this.getEchartRight();
    });
  },
  methods: {
    getEchartRight() {
      let myChart = echarts.init(document.getElementById('chart_right2'));
      let option = {
        color: ['#00FFBF', '#FF007F', '#8F00FF', '#FF6F61', '#DFFF00'],
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)',
          backgroundColor: 'rgba(50, 50, 50, 0.7)',
          textStyle: {
            color: '#fff'
          }
        },
        series: [{
          type: 'pie',
          radius: ['30%', '70%'],
          roseType: 'radius',
          itemStyle: {
            normal: {
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              borderColor: 'rgba(0,0,0,0.1)',
              borderWidth: 1
            },
            emphasis: {
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          label: {
            show: false  // 去掉图上的文字
          },
          labelLine: {
            show: false  // 去掉延伸的虚线
          },
          data: [
            { value: this.normalEquipment, name: '正常' },
            { value: this.alarmEquipment, name: '报警' },
            { value: this.offlineEquipment, name: '离线' },
            { value: this.faultEquipment, name: '故障' },
            { value: this.unableEquipment, name: '未启用' }
          ]
        }]
      };

      myChart.setOption(option, true);

      // 鼠标触碰时的高亮效果
      myChart.on('mouseover', function (params) {
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: params.dataIndex
        });
      });

      // 鼠标移出时取消高亮
      myChart.on('mouseout', function (params) {
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: params.dataIndex
        });
      });

      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.distribution-container {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .chart {
    height: 30vh;
    width: 50%;
  }

  .info-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 45%;
  }

  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .icon {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }

    .normal-icon {
      background-color: #00FFBF;
    }
    .alarm-icon {
      background-color: #FF007F;
    }
    .offline-icon {
      background-color: #8F00FF;
    }
    .fault-icon {
      background-color: #FF6F61;
    }
    .unable-icon {
      background-color: #DFFF00;
    }
  }
}
</style>
